<template>
  <div class="ad" v-if="show">
    <div class="header">
      <span>广告</span>
      <span @click="show = false">{{ count }}S 跳过</span>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
const count = ref(5);
const show = ref(false)

setInterval(() => {
  count.value--;

  if (count.value <= 0) {
    show.value = false
  }
}, 1000);
</script>


<style lang="scss">
.ad {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: red;

  .header {
    display: flex;
    justify-content: space-between;
  }
}
</style>